<template>
	<view>
		<view class="cardWrap">
			<view class="QAcard" v-for="(item,index) in dataList" @click="selectCard(item,index)"
				:class="selectFlag ? 'QAcard-choose' : '' ">
				<!-- 				<view v-if="selectFlag" class="switch-button"
					:class="selectArray.indexOf(index) === -1 ? '' : 'switch-button-choose' ">
				</view> -->
				<u-icon :class="selectArray.indexOf(index) === -1 ? 'iconStyle':'iconStyle-active'"
					name="checkmark-circle" size="35" v-if="selectFlag"></u-icon>
				<qa-card :key='index' :data='item' ref="QAcard" @edit='edit($event)' @deleteQA='deleteQA($event)'>
				</qa-card>
			</view>
			<u-loadmore v-if="dataList.length != 0" :status="status" />
		</view>
		<view>
			<u-popup v-model="popupEdit" mode="center">
				<view>
					<view class="poptitle">
						<u-field v-model="editTitle" label="标题" placeholder="请填写标题">
						</u-field>
					</view>
					<view class="poptext">
						<u-field v-model="editText" label="问题内容" placeholder="请填写问题内容" type="textarea">
						</u-field>
					</view>
					<view class="editbutton">
						<button type="default" @click="editFinish()">完成</button>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup v-model="popupDelete" mode="center">
				<view class="popupDelete">
					<view class="warnText">
						删除后不可恢复，确认删除吗？
					</view>
					<view class="confirmButton">
						<view class="deletebutton">
							<u-button type="error" @click="deleteFinish()">删除</u-button>
						</view>
						<view class="canclebutton">
							<u-button type="default" @click="popupDelete = false">取消</u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="button" v-if="selectFlag">
			<view class="select">
				<u-button type="primary" @click="selectAll()" v-if="!isSelectAll">全选</u-button>
				<u-button type="primary" @click="selectAll()" v-if="isSelectAll">取消全选</u-button>
			</view>
			<view class="delete">
				<u-button type="error" @click="deleteQAs()">删除</u-button>
			</view>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="empty" v-if="dataList.length === 0">
			<u-empty text="数据为空" mode="list" icon-size="240" font-size="35"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				selectFlag: false,
				selectArray: [],
				popupEdit: false,
				popupDelete: false,
				editTitle: '',
				editText: '',
				editId: null,
				delingId: null,
				delIds: [],
				isSelectAll: false
			};
		},
		created() {
			this.dataList = this.list
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			status: {
				type: String,
				default () {
					return 'loadmore'
				}
			}
		},
		watch: {
			list(newV, oldV) {
				this.dataList = newV
			},
			selectArray(newV, oldV) {
				if(newV.length<this.dataList.length){
					this.isSelectAll = false
				}else if(newV.length==this.dataList.length){
					this.isSelectAll = true
				}
			},
		},
		methods: {
			selectQA() {
				if(this.dataList.length == 0){
					return null
				}
				if (this.selectFlag && this.selectArray) {
					this.selectArray = []
				}
				this.selectFlag = !this.selectFlag
				this.$refs.QAcard.forEach((item) => {
					item.cardSelected()
				});
			},
			deleteQAs(data) {
				this.popupDelete = true
			},
			deleteQA(data) {
				if (!this.selectFlag) {
					this.popupDelete = true
					this.delingId = data.id
				}
			},
			selectCard(item, index) {
				if (!this.selectFlag) {
					return null
				} else {
					let flag = this.selectArray.indexOf(index)
					if (flag === -1) {
						this.selectArray.push(index)
						this.delIds.push(item.id)
					} else {
						this.selectArray.splice(flag, 1)
						this.delIds.splice(flag, 1)
					}
				}
			},
			selectAll() {
				console.log(this.dataList);
				if (!this.isSelectAll) {
					this.selectArray = []
					this.delIds = []
					this.dataList.forEach((item, index) => {
						this.selectArray.push(index)
						this.delIds.push(item.id)
					})
					this.isSelectAll = true
				} else {
					this.selectArray = []
					this.delIds = []
					this.isSelectAll = false
				}
			},
			edit(data) {
				if (!this.selectFlag) {
					this.popupEdit = true
					this.editTitle = data.title
					this.editText = data.content
					this.editId = data.id
				}
			},
			editFinish() {
				if (!this.editTitle) {
					this.$refs.uToast.show({
						title: '标题不能为空',
						type: 'warning'
					})
					return
				}
				if (!this.editText) {
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'warning'
					})
					return
				}
				this.$api.updateQuestions(this.$store.state.access_token, this.editId, this.editTitle, this.editText)
					.then(res => {
						console.log(res);
						this.$refs.uToast.show({
							title: '编辑成功',
							type: 'success'
						})
						setTimeout(() => {
							this.$emit('refresh')
						}, 1000)

					})
				this.popupEdit = false
			},
			deleteFinish() {
				if (this.delingId) {
					this.delIds.push(this.delingId)
				}
				if (!this.delIds.length) {
					this.$refs.uToast.show({
						title: '请选择删除的问答',
						//type: 'success',
					})
					return
				}
				console.log(this.delIds);
				this.$api.delQuestionsBatch(this.$store.state.access_token, this.delIds.toString())
					.then(res => {
						console.log(res);
						this.delingId = null
						this.delIds = []
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						})
						setTimeout(() => {
							this.$emit('refresh');
						}, 1000)
					})
				this.selectFlag = false
				this.popupDelete = false
			}

		},
	}
</script>

<style lang="scss">
	.cardWrap {
		box-sizing: border-box;
		padding-bottom: 80rpx;

		.iconStyle {
			padding: 0 0 0 45rpx;
			// transition: 0.5s;
		}

		.iconStyle-active {
			padding: 0 0 0 45rpx;
			// transition: 0.5s;
			color: #2979ff;
		}

		.QAcard-choose {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.switch-button {
				box-sizing: border-box;
				margin-left: 40rpx;
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid $theme-color;
				border-radius: 20rpx;
			}

			.switch-button-choose {
				background-color: $theme-color;
			}
		}

	}

	.button {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;

		.select {
			width: 50%;
		}

		.delete {
			width: 50%;
		}
	}

	.popupDelete {
		box-sizing: border-box;
		padding: 50rpx;

		.confirmButton {
			padding-top: 35rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-evenly;

			.deletebutton {
				width: 45%;
			}

			.canclebutton {
				width: 45%;
			}

		}
	}
	.empty {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
</style>
